﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="../css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="../css/main.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/notice.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="/layer/layer.js"></script>
    <style>
        .expInfoCont {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
        }

        .expInfoCont td:nth-of-type(1) {
            text-align: right;
            height: 2em;
            line-height: 2em;
        }

        .status1 {
            position: relative;
        }

        .status1_bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .status1_bg > img {
            width: 30%;
            margin: 50px auto 0;
            opacity: 0.5;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#expressBody").hide();
            $.getJSON("/wx/userInfo.do", null, function (data) {
                if (data.status === 0) {
                    $("#courierAssistant").show();
                }
            });

            $("#logout").click(function () {
                layer.confirm("<span style='color: black;font-size:18px'>你确定退出吗?</span>", {
                        btn: ['确定', '取消'],
                        title: ""
                    },
                    function () {
                        var windowId = layer.load();
                        $.getJSON("/wx/logout.do", null, function (data) {
                            layer.close(windowId);
                            if (data.status === 0) {
                                location.assign("login.html");
                            }
                        });
                    });
            });

            var pageContextVal = $("#PageContext").val();

            $(".userFun").click(function () {
                var clickNum = $(this).index();
                switch (clickNum) {
                    //个人中心
                    case(0):
                        window.location.href = "wxUserhome.html";
                        break;
                    case(1):
                        window.location.href = "lazyboard.html";
                        break;
                    case(2):
                        window.location.href = "/wx/createQRCode.do?type=user";
                        break;
                    case(3):
                        window.location.href = "expressList.html";
                        break;
                    case(4):
                        window.location.href = "expressAssist.html";
                        break;
                    case(5):
                        // window.location.href = "login.html";
                        break;
                }
            });

            var initFunc = function () {
                var windowH = $(document).height();
                var windowW = $(document).width();

                $(".content").css({"height": windowH + "px"});

                var contentW = $(".content").width();
                var contentH = $(".content").height();

                var contH = windowH / 3;
                $(".autoH").css({"height": contH + "px"});

                // userFunH  content
                var middleH = $(".middle").height() + 40;
                var userFunH = contentH - contH - middleH - 30 - 20; //footer,userfun(margin)
                $(".funContdiv").css({"height": userFunH + "px"});

                var funIconH = $(".funIcon").width();
                $(".funIcon").css({
                    "height": funIconH + "px",
                    "line-height": funIconH + "px",
                    "border-radius": funIconH / 2 + "px",
                    "font-size": funIconH / 2 + "px"
                });

            };

            initFunc();

            $(window).resize(function () {
                initFunc();
            });

            // input focus
            $(".middle .forminput input").focus(function () {
                $(".middle .forminput").css({
                    "border": "1px solid rgba(31,114,255,.75)",
                    "box-shadow": "0 0 8px rgba(31,114,255,.5)"
                });
            });

            // input blur
            $(".middle .forminput input").blur(function () {
                $(".middle .forminput").css({"border": "1px solid #333333", "box-shadow": "none"});
            });
            var openId = null;
            //submit arrow
            $(".submBtn").click(function () {
                var windowId = layer.load();
                var number = $("#expressNum").val();//快递单号
                if (number === "") {
                    layer.close(windowId);
                    layer.msg("请输入快递单号！");
                } else {
                    $.getJSON("/wx/findByNumber.do", {number: number}, function (data) {
                        layer.close(windowId);
                        layer.msg(data.content);
                        $("#express").show();
                        if (data.status === 0) {
                            var express = data.data;
                            $("#company0").text(express.company);
                            $("#number0").text(express.number);
                            $("#inTime0").text(express.inTime);
                            $("#code0").text(express.code);
                            $("#expressBody").show();
                            openId = layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['320px', '280px'], //宽高
                                title: '快递信息',
                                content: $("#expUserInfoCont0"),
                                cancel: function () {
                                    $("#expressBody").hide();
                                }
                            });
                        } else if (data.status === 1) {
                            var express = data.data;
                            $("#company1").text(express.company);
                            $("#number1").text(express.number);
                            $("#inTime1").text(express.inTime);
                            $("#outTime1").text(express.outTime);
                            $("#expressBody").show();
                            openId = layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['320px', '280px'], //宽高
                                title: '快递信息',
                                content: $("#expUserInfoCont1"),
                                cancel: function () {
                                    $("#expressBody").hide();
                                }
                            });
                        }
                    });
                }
            });
        })
    </script>
</head>
<body>
<div class="content">
    <div class="top autoH">
        <div class="logo autoH">
            <img src="../images/logo.png" width="100%">
        </div>
    </div>
    <div class="middle">
        <form id="theForm">
            <div class="forminput">
                <input type="text" id="expressNum" name="expressNum" placeholder="请输入快递单号...">
                <!--					<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />-->
                <div class="submBtn"></div>
            </div>
        </form>
    </div>
    <div class="funContdiv">
        <div class="funCont">
            <div class="userFun">
                <p class="funIcon userFunColor1"></p>
                <p class="funTxt">个人中心</p>
            </div>
            <div class="userFun">
                <p class="funIcon userFunColor2"></p>
                <p class="funTxt">懒人排行</p>
            </div>
            <div class="userFun">
                <p class="funIcon userFunColor3"></p>
                <p class="funTxt">取货二维码</p>
            </div>
            <div class="userFun">
                <p class="funIcon userFunColor4"></p>
                <p class="funTxt">我的快件</p>
            </div>
            <div class="userFun" id="courierAssistant" hidden>
                <p class="funIcon userFunColor5"></p>
                <p class="funTxt">快递助手</p>
            </div>
            <div class="userFun" id="logout">
                <p class="funIcon userFunColor6"></p>
                <p class="funTxt">退出登录</p>
            </div>
        </div>
    </div>

    <div class="footer">
        <p class="copytxt">&copy;新职课版权所有</p>
    </div>
</div>
</body>
<div id="expressBody">
    <div class="expUserInfoCont" id="expUserInfoCont0">
        <div class="expInfoCont status0">
            <table>
                <tr>
                    <td>快递公司：</td>
                    <td id="company0"></td>
                </tr>
                <tr>
                    <td>快递单号：</td>
                    <td id="number0"></td>
                </tr>
                <tr>
                    <td>到件时间：</td>
                    <td id="inTime0"></td>
                </tr>
                <tr>
                    <td>取件码：</td>
                    <td id="code0"></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="expUserInfoCont" id="expUserInfoCont1">
        <div class="expInfoCont status1">
            <table>
                <tr>
                    <td>快递公司：</td>
                    <td id="company1"></td>
                </tr>
                <tr>
                    <td>快递单号：</td>
                    <td id="number1"></td>
                </tr>
                <tr>
                    <td>到件时间：</td>
                    <td id="inTime1"></td>
                </tr>
                <tr>
                    <td>取件时间：</td>
                    <td id="outTime1"></td>
                </tr>
            </table>
            <div class="status1_bg">
                <img src="../images/status2_bg.png">
            </div>
        </div>
    </div>
</div>
</html>